<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="resources/mytheme/css/main.css">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<title>Locate a Doctor</title>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
	var map;
	var service;
	var placesList;
	var latitude;
	var longitude;
	var markers = [];
	function initialize() {

		//Get the latitude and longitude from session var
		latitude =
<%=request.getAttribute("lat")%>
	longitude =
<%=request.getAttribute("long")%>
	var myLocation = new google.maps.LatLng(latitude, longitude);

		map = new google.maps.Map(document.getElementById('map-canvas'), {
			center : myLocation,
			zoom : 12
		});

		var request = {
			location : myLocation,
			radius : 5000,
			types : [ 'doctor' ]
		};

		placesList = document.getElementById('places');

		service = new google.maps.places.PlacesService(map);
		service.nearbySearch(request, callback);

		// Create the search box and link it to the UI element.
		  var input = /** @type {HTMLInputElement} */(
		      document.getElementById('pac-input'));

		var searchBox = new google.maps.places.SearchBox(
			    /** @type {HTMLInputElement} */(input));

		// [START region_getplaces]
		  // Listen for the event fired when the user selects an item from the
		  // pick list. Retrieve the matching places for that item.
		  google.maps.event.addListener(searchBox, 'places_changed', function() {
		    var places = searchBox.getPlaces();

		    if (places.length == 0) {
		      return;
		    }
		    for (var i = 0, marker; marker = markers[i]; i++) {
		      marker.setMap(null);
		    }

		    // For each place, get the icon, place name, and location.
		    markers = [];
		    var bounds = new google.maps.LatLngBounds();
		    for (var i = 0, place; place = places[i]; i++) {
		      var image = {
		        url: place.icon,
		        size: new google.maps.Size(71, 71),
		        origin: new google.maps.Point(0, 0),
		        anchor: new google.maps.Point(17, 34),
		        scaledSize: new google.maps.Size(25, 25)
		      };

		      // Create a marker for each place.
		      var marker = new google.maps.Marker({
		        map: map,
		        icon: image,
		        title: place.name,
		        position: place.geometry.location
		      });

		      markers.push(marker);

		      bounds.extend(place.geometry.location);
		    }

		    map.fitBounds(bounds);
		  });
	    

	}

	function callback(results, status, pagination) {
		if (status != google.maps.places.PlacesServiceStatus.OK) {
			return;
		} else {
			createMarkers(results);

			if (pagination.hasNextPage) {
				var moreButton = document.getElementById('more');

				moreButton.disabled = false;

				google.maps.event.addDomListenerOnce(moreButton, 'click', function() {
					moreButton.disabled = true;
					pagination.nextPage();
					});
			}
		}
	}

	function createMarkers(places) {
		var bounds = new google.maps.LatLngBounds();

		for (var i = 0, place; place = places[i]; i++) {
			var image = {
				url: place.icon,
				size: new google.maps.Size(71, 71),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 34),
				scaledSize: new google.maps.Size(25, 25)

			};

			var marker = new google.maps.Marker( {
				map: map,
				icon: image,
				title: place.name,
				position: place.geometry.location
			}); 

			placesList.innerHTML += '<li>' + place.name + '</li>';

			markers.push(marker);

			bounds.extend(place.geometry.location);
		}
		map.fitBounds(bounds);
	}

	google.maps.event.addDomListener(window, 'load', initialize);


</script>
	
</head>
<body>
	<div id="headerContainer">
		<div class="centerContainer">
			<ol>
				<sec:authorize ifAllGranted="ROLE_ADMIN">
					<li><a href="AdminUsers">Users</a></li>
					<li><a href="AdminRejectedClaims">Rejected Claims</a></li>
					<li><a href="AdminAcceptedClaims">Accepted Claims</a></li>
					<li><a href="AdminAllClaims">All Claims</a></li>
				</sec:authorize>
				<sec:authorize ifAnyGranted="ROLE_ADMIN, ROLE_ADJUSTER">
					<li><a href="InsuranceAdjuster">Adjust Claims</a></li>
				</sec:authorize>
			</ol>
		</div>
		<!-- /centerContainer -->

	</div>
	<!-- /headerContainer -->

	<div id="secondHeaderContainer">
		<div class="logoContainer">
			<img src="resources/mytheme/images/logo2.png" alt="logo" width="205"
				height="89">
		</div>
		<!-- /logoContainer -->
		<div class="navContainer">

			<ul id="navWrapper">
				<li><a href="/AcmeClaims">Home</a></li>
				<sec:authorize ifNotGranted="ROLE_ADMIN">
					<c:if test="${pageContext.request.userPrincipal.name != null}">
						<li>
							<!-- Menu A --> <a href="#">Claims</a>
							<ul>
								<li><a href="ClaimPortal">Submit Claim</a></li>
								<li><a href="MyAccount">View Claim</a></li>
							</ul>
						</li>
						<li><a href="MyAccount">My Account</a></li>
					</c:if>
				</sec:authorize>
				<li><a href="locatedoctor">Find a Doctor</a></li>
			</ul>
		</div>
		<!-- /navContainer -->
	</div>
	<!-- /secondHeaderContainer -->

	<div id="thirdHeaderContainer">
		<div class="lowerheaderContainer">
			<c:if test="${pageContext.request.userPrincipal.name != null}">
				<ol>
					<li><a href="<c:url value="/MyAccount" />">${pageContext.request.userPrincipal.name}</a></li>
					<li>|</li>
					<li><a href="<c:url value="/Logout" />"> Logout</a></li>
				</ol>
			</c:if>
			<c:if test="${pageContext.request.userPrincipal.name == null}">
				<ol>
					<li><a href="Login">Log-In</a></li>
					<li>|</li>
					<li><a href="register">Register</a></li>
				</ol>
			</c:if>
		</div>
		<!-- /lowerHeader-->
	</div>
	<!--/thirdHeaderContainer"-->
	<div id="mainCenterHolder">
		<div class="mainCenterContainerLogin">
			<input id="pac-input" class="controls" type="text"
		placeholder="Search Box">
			<div id="results">
				<h2>Results</h2>
				<ul id="places"></ul>
				<button id="more">More results</button>
			</div>
			<div id="map-canvas"></div>
		</div>
	</div>
	<div id="footer">
		<div class="footerwrap">
			<div class="foota">
				<br>
				<p>Connect With Us</p>
				<div id="footapad">
					<a href="#"><img src="resources/mytheme/images/fb.png"
						id="facebook" alt="logo" width="67" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/twit.png" id="twitter" alt="logo"
						width="65" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/pin.png" id="pintrest" alt="logo"
						width="67" height="73" /></a>


				</div>
			</div>
			<div class="footb">
				<br>
				<p>Toll Free: 1-800-382-3827</p>
				<ol>
					<li>Acme Corporate</li>
					<li>143 23rd Ave South</li>
					<li>Fargo, North Dakota 58121</li>
				</ol>
			</div>
			<div class="footc">
				<br>
				<p>Need Help?</p>
				<ol>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Get Directions</a></li>
					<li><a href="#">FAQ's</a></li>
				</ol>

			</div>
		</div>
		<!-- FooterWrap -->
	</div>
	<!-- Footer -->
</body>
</html>